<template>
	<view class="nearby-oil-page">
		<!-- 顶部搜索栏和模式切换按钮 -->
		<view class="top-bar">
			<view class="search-box">
				<input type="text" placeholder="输入需要搜索的内容" />
				<button class="search-btn">
					<image src="/static/搜索.png" class="search-icon" mode="aspectFit" />
				</button>
			</view>
			<view class="mode-btn" @click="toggleMode">
				<text>{{ isMapMode ? '列表\n模式' : '地图\n模式' }}</text>
			</view>
		</view>

		<!-- 油品类型标签栏 -->
		<view class="oil-types" v-if="!isMapMode">
			<button class="oil-type">90#</button>
			<button class="oil-type">92#</button>
			<button class="oil-type">93#</button>
			<button class="oil-type">95#</button>
			<button class="oil-type">97#</button>
			<button class="oil-type">98#</button>
		</view>

		<!-- 内容区域：列表模式 -->
		<view class="station-list" v-if="!isMapMode">
			<view class="station-item" v-for="(station, index) in stations" :key="index"
				@click="goNavigateWithStation(station)">
				<view class="station-header">
					<text class="station-name">{{ station.name }}</text>
					<text class="distance">{{ station.distance }}</text>
				</view>
				<view class="discount-tags">
					<text class="tag" v-for="(tag, tagIndex) in station.tags" :key="tagIndex">{{ tag }}</text>
				</view>
				<view class="station-info">
					<image :src="station.image" class="station-img" mode="aspectFill"></image>
					<view class="station-desc">
						<text class="business-hours">营业时间：{{ station.businessHours }}</text>
						<text class="price">¥{{ station.price }}/升</text>
						<text class="address">
							{{ station.address }}
							<image src="/static/plane.png" class="navigate-icon"></image>
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 内容区域：地图模式 -->
		<view class="map-mode" v-else>
			<!-- 加油站信息和按钮区域 -->
			<view class="map-station-info">
				<!-- 地图区域 -->
				<map style="width: 100%; height: 850rpx;" :latitude="center.latitude" :longitude="center.longitude"
					:scale="scale" :show-location="true" :markers="markers" @markertap="onMarkerTap">
				</map>
				<view class="info-row">
					<view class="text-info">
						<text class="map-station-name">{{ mapStation.name }}</text>
						<text class="map-station-address">{{ mapStation.address }}</text>
						<button class="store-detail-btn">
							<uni-icons class="map_icon" type="info" size="20" color="#2b79f5"></uni-icons>
							<text class="map_text">门店详情>></text>
						</button>
					</view>
					<image :src="mapStation.image" class="station-thumbnail" mode="aspectFill"></image>
				</view>
				<button class="navigate-btn" @click="goNavigatePage()">立即导航</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMapMode: false,
				// 加油站列表数据
				stations: [{
						name: "中国石油加油站",
						distance: "556m",
						tags: ["满200减20", "满500减60"],
						image: "/static/中国石油.png",
						businessHours: "周一至周日",
						price: "5.66",
						address: "山阳区人民路与解放路交叉口"
					},
					{
						name: "中国石化加油站",
						distance: "880m",
						tags: ["会员95折", "免费洗车"],
						image: "/static/中国石化.png",
						businessHours: "周一至周日",
						price: "5.88",
						address: "解放区民主路与工业路交叉口"
					}
				],
				// 地图模式显示的加油站信息（默认显示第一家，坐标在初始化后更新）
				mapStation: {
					id: 1,
					name: "中国石油加油站",
					address: "山阳区人民路与解放路交叉口",
					latitude: 35.240,
					longitude: 113.290,
					image: "/static/中国石油.png"
				},
				// 地图中心与配置
				center: {
					latitude: 35.240,
					longitude: 113.290
				},
				scale: 14,
				markers: [],
			};
		},
		onLoad() {
			this.initLocation();
		},
		methods: {
			// 切换列表/地图模式
			toggleMode() {
				this.isMapMode = !this.isMapMode;
			},
			// 获取当前位置并构建标记
			initLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.center = {
							latitude: res.latitude,
							longitude: res.longitude
						};
						this.buildMarkers();
					},
					fail: () => {
						// 失败则使用默认中心
						this.buildMarkers();
					}
				});
			},
			// 构建地图标记点（我的位置 + 模拟附近站点）
			buildMarkers() {
				const userMarker = {
					id: 0,
					latitude: this.center.latitude,
					longitude: this.center.longitude,
					width: 28,
					height: 28,
					iconPath: '/static/组 8.png',
					callout: {
						content: '我的位置',
						color: '#333',
						fontSize: 12,
						borderRadius: 6,
						padding: 6,
						display: 'ALWAYS'
					}
				};
				// 用相对偏移模拟两家附近加油站
				const offsets = [{
						lat: 0.002,
						lng: 0.004
					},
					{
						lat: -0.0015,
						lng: -0.003
					}
				];
				const stationMarkers = this.stations.map((s, i) => {
					const off = offsets[i % offsets.length];
					const lat = this.center.latitude + off.lat;
					const lng = this.center.longitude + off.lng;
					return {
						id: i + 1,
						latitude: lat,
						longitude: lng,
						width: 28,
						height: 28,
						iconPath: '/static/中国石油.png',
						callout: {
							content: s.name,
							color: '#2b79f5',
							fontSize: 12,
							borderRadius: 6,
							bgColor: '#ffffff',
							padding: 6,
							display: 'BYCLICK'
						}
					};
				});
				this.markers = [userMarker, ...stationMarkers];
				// 默认选中第一家站点
				if (stationMarkers.length > 0) {
					this.mapStation = {
						id: 1,
						name: this.stations[0].name,
						address: this.stations[0].address,
						latitude: stationMarkers[0].latitude,
						longitude: stationMarkers[0].longitude,
						image: this.stations[0].image
					};
				}
			},
			// 点击标记点切换下方信息（忽略我的位置 id=0）
			onMarkerTap(e) {
				const markerId = e.detail && e.detail.markerId;
				if (!markerId || markerId === 0) return;
				const index = markerId - 1;
				const station = this.stations[index];
				const marker = this.markers.find(m => m.id === markerId);
				if (station && marker) {
					this.mapStation = {
						id: markerId,
						name: station.name,
						address: station.address,
						latitude: marker.latitude,
						longitude: marker.longitude,
						image: station.image
					};
				}
			},
			// 跳转到导航页（统一方法名）
			goNavigatePage(station) {
				const target = station || this.mapStation;
				this.setSelectedStation(target);
				uni.navigateTo({
					url: '/pages/refuelNearby/navigate/navigate'
				});
			},
			// 统一的保存站点方法
			setSelectedStation(station) {
				if (!station) return;
				const payload = {
					id: station.id || 1,
					name: station.name,
					address: station.address,
					latitude: station.latitude || (this.center.latitude),
					longitude: station.longitude || (this.center.longitude),
					image: station.image
				};
				try {
					uni.setStorageSync('selectedStation', payload);
				} catch (e) {}
			},
			// 从列表点击某个站点后，设置为当前并跳转
			goNavigateWithStation(station) {
				this.goNavigatePage(station);
			}
		}
	};
</script>

<style scoped>
	.nearby-oil-page {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		background-image: linear-gradient(to bottom, #3486FD 0%, #0A64E7 300rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
	}

	/* 顶部栏样式 */
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		flex: 1;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 16rpx 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.search-box input {
		flex: 1;
		border: none;
		background-color: transparent;
		font-size: 28rpx;
		padding: 10rpx 0;
	}

	.search-btn {
		background-color: transparent;
		border: none;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
	}

	.mode-btn {
		width: 120rpx;
		height: 120rpx;
		background: url('/static/组 5.png') no-repeat center;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 1.2;
		margin-left: 20rpx;
	}

	/* 油品类型标签样式 */
	.oil-types {
		display: flex;
		margin: 30rpx;
		margin-bottom: 30rpx;
	}

	.oil-type {
		width: 80rpx;
		height: 50rpx;
		background-color: #2b79f5;
		color: #fff;
		border: 1rpx solid #e5e5e5;
		border-radius: 10rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 列表模式样式 */
	.station-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.station-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.station-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.distance {
		font-size: 26rpx;
		color: #666;
	}

	.discount-tags {
		display: flex;
		gap: 16rpx;
		margin-bottom: 24rpx;
		flex-wrap: wrap;
	}

	.tag {
		background-color: #fff0f0;
		color: #ff4d4f;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
	}

	.station-info {
		display: flex;
		align-items: flex-start;
	}

	.station-img {
		width: 200rpx;
		height: 140rpx;
		border-radius: 8rpx;
		margin-right: 24rpx;
	}

	.station-desc {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.business-hours,
	.address {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.price {
		font-size: 16px;
		color: #f53f3f;
		font-weight: bold;
		margin: 6rpx 0;
	}

	.navigate-btn {
		background-color: transparent;
		margin-left: auto;
	}

	.navigate-icon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 20rpx;
	}

	/* 地图模式样式 */
	.map-mode {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.map-station-info {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 15px;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.info-row {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.text-info {
		flex: 1;
		margin-right: 30rpx;
	}

	.map-station-name {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8px;
	}

	.map-station-address {
		font-size: 13px;
		color: #666;
		display: block;
	}

	.store-detail-btn {
		background-color: transparent;
		border: none;
		color: #2b79f5;
		font-size: 28rpx;
		padding: 0;
		text-align: left;
	}

	.store-detail-btn::after {
		border: none;
	}

	.map_icon {
		display: inline-block;
		vertical-align: middle;
	}

	.map_text {
		display: inline-block;
		vertical-align: middle;
		margin-left: 10rpx;
	}

	.station-thumbnail {
		width: 100px;
		height: 70px;
		border-radius: 4px;
	}

	.map-mode .navigate-btn {
		background-color: #2b79f5;
		color: #fff;
		border: none;
		border-radius: 80rpx;
		padding: 10px 0;
		width: 100%;
		font-size: 16px;
	}
</style>